<template>
  <td>
    <span class="span-width">{{attrName}}</span>
    <span class="readmore">
       <input title="" type="text" class="controls-text" v-model="bindValue" v-if="typeAttr === 'string'">
       <el-select filterable allow-create id="province" v-model="bindValue" size="medium" v-if="typeAttr === 'select'" >
          <el-option value="" selected>请选择</el-option>
          <el-option v-for="item in selectData"  :value="item.name" :key="item.name"
                     :label="item.name"></el-option>
       </el-select>
       <el-date-picker style="margin-top: 4px" v-if="typeAttr === 'date'"
         v-model="bindValue"
         type="date"
         size="medium"
         placeholder="选择日期"
         :picker-options="pickerOptions">
      </el-date-picker>
    </span>
  </td>
</template>
<script>
  import {formatDate} from '@/utils/formatDate.js';
  export default {
    name: 'inputDD',
    props: ['typeAttr', 'attrName', 'pIndex', 'cIndex', 'tIndex','selectData','typeValue'],
    data() {
      let serverCurrentTime = new Date(this.$store.getters.serverCurrentTime.replace("/-/g",""));
      return {
        bindValue: '',
        pickerOptions : {
          disabledDate(time) {
            return time.getTime() > serverCurrentTime;
          }
        }
      }
    },
    methods: {},
    watch: {
      bindValue(val) {
        if(this.typeAttr === 'date'){
          val = formatDate(this.bindValue, "yyyy-MM-dd");
        }
        this.$emit("setChangeValue", val, this.pIndex, this.cIndex, this.tIndex);
      },
      typeValue(val){
        this.bindValue = "";
      }
    }
  }
</script>
